<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>여기에 제목을 입력하세요.</title>

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />

<!-- jquery-ui(popup) -->
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<!-- 폰트 적용 -->
<link href='http://fonts.googleapis.com/css?family=Chango'
	rel='stylesheet' type='text/css'>

<!-- font-awesome 적용 -->
<link rel="stylesheet"
	href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<!-- custom css 적용 -->
<link rel="stylesheet" href="assets/css/index.css">
<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
</head>
<body onload="init();">

	<!--****************************************************** 
		[내 위치 입력에 대한한 팝업박스]
		인덱스 페이지의 내 위치 버튼을 누르면 올라오는 팝업 박스
	*******************************************************-->
	<div class="popup-box">
		<p>현재 위치를 <br /> 입력 하시겠습니까?</p>
		<div>
			<span class="btn btn-primary popup-sl pull-left"><a href="#" onfocus='blur();'>출발지로</a></span>
			<span class="btn btn-primary popup-el"><a href="#">도착지로</a></span>
			<span class="btn btn-warning popup-close pull-right"><a href="#">취소</a></span>
		</div>
	</div>
	<!-- 업데이트에 대한 팝업박스 끝....-->

	<div class="container">
		<div class="content col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
			<div class="arryazum_logo">
				<h1>알랴쥼</h1>
			</div>
			
			<form class="form-signin" method="post" action="select_result.jsp">
				<input type="hidden" name="start" id="startgps">
				<input type="hidden" name="end" id="endgps">

				<div class="input-group departure_box">
					<input name="start_location" id="sl" type="text" class="form-control input-top" placeholder="출발지">
					<span class="input-group-btn">
						<button class="btn btn-default input-search input-btn input-btn-top" type="button"><i class="fa fa-search"></i></button>
					</span>
				</div>
				<div class="input-group">
					<input name="end_location" id="el" type="text" class="form-control input-bottom" placeholder="도착지">
					<span class="input-group-btn">
						<button class="btn btn-default input-search input-btn input-btn-middle" type="button"><i class="fa fa-search"></i></button>
					</span>
				</div>
				
				<div class="input-group set-time time_box">
				</div>

				<div class="btns_box">
					<button class="btn btn-lg btn-danger btn-block" type="submit">경로 검색</button>
					<div class="row">
						<div class="col-sm-6 col-xs-6">
							<button class="btn btn-lg btn-info btn-block" type="button">내 위치</button>
						</div>
						<div class="col-sm-6 col-xs-6">
							<button class="btn btn-lg btn-warning btn-block" type="button" onclick="location.href='BookMark.jsp';">북마크</button>
						</div>
					</div>
				</div>
			</form>
			<div class="quick_menu_box col-md-6">
				가나다라마바사아자차카타파하
			</div>
		</div>
		

		<!-- 메뉴 버튼 -->
		<div class="nav">
			<ul>
				<li><a href="" class="nav-btn"><i id="img" class="fa fa-plus"></i></a></li>
			</ul>
			<ul>
				<li><a href="" class="nav-btn"><i class="fa fa-times"></i></a></li>
				<li><a href="option.jsp" class="nav-btn"><i class="fa fa-cog"></i></a></li>
				<li><a href="metro_route.jsp" class="nav-btn"><i class="fa fa-desktop"></i></a></li>
				<li><a href="RoutLibrary.jsp" class="nav-btn"><i class="fa fa-book"></i></a></li>
			</ul>
		</div>
		<!-- 메뉴 버튼 끝 -->
		<div id="test"></div>

	</div>
	<!-- /container -->

	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/string.js"></script>
	<script src="assets/js/index.js"></script>
	<script src="assets/js/db.js"></script>
	<script type="text/javascript">
		var alarmDB = {};
		alarmDB.webdb = {};
		alarmDB.webdb.db = null;
	      
		alarmDB.webdb.open = function() {
			var dbSize = 1 * 1024 * 1024; // 5MB
			alarmDB.webdb.db = openDatabase("alarmDB", "1.0", "알람DB", dbSize);
		};
	      
		alarmDB.webdb.createTable = function() {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx) {
					tx.executeSql("CREATE TABLE IF NOT EXISTS alarmDB(key TEXT, value TEXT)", []);
			});
		};
	      
		alarmDB.webdb.addalarm = function(key, value) {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx){
				tx.executeSql("INSERT INTO alarmDB(key, value) VALUES (?,?)",
						[key, value],
						alarmDB.webdb.onSuccess,
						alarmDB.webdb.onError);
			});
		};
	      
		alarmDB.webdb.onError = function(tx, e) {
			alert("There has been an error: " + e.message);
			};
	      
		alarmDB.webdb.onSuccess = function(tx, r) {
		};
	      
		alarmDB.webdb.getAllalarmItems = function(renderFunc) {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx) {
				tx.executeSql("SELECT * FROM alarmDB", [], renderFunc,
						alarmDB.webdb.onError);
			});
		};
		
		function loadalarmList(tx, rs) {
			if (rs.rows.length <= 0) {
				alert("알람 초기화");
				alarmDB.webdb.addalarm("is_alarm", true);
				alarmDB.webdb.addalarm("set_time", 5);
				alarmDB.webdb.addalarm("set_dis", 30);
			}
		}
	
		var e_focus = 0;
	
		$(function() {
			alarmDB.webdb.open();
			alarmDB.webdb.createTable();
			alarmDB.webdb.getAllalarmItems(loadalarmList);
			
			setime();
			
			$('button').click(function() {
				if($('#sl').val().isValue()) {
					if (sessionStorage["sl"] != $('#sl').val()){
						sessionStorage["sl"] = $('#sl').val();
						sessionStorage["sg"] = '';
						$('#sl').val(sessionStorage["sl"]);
						$('#startgps').val(sessionStorage["sg"]);
					}
				}
				
				if($('#el').val().isValue()) {
					if (sessionStorage["el"] != $('#el').val()){
						sessionStorage["el"] = $('#el').val();
						sessionStorage["eg"] = '';
						$('#el').val(sessionStorage["el"]);
						$('#endgps').val(sessionStorage["eg"]);
					}
				}
			});
			
			$('#sl').val(sessionStorage["sl"]);
			$('#el').val(sessionStorage["el"]);
			$('#startgps').val(sessionStorage["sg"]);
			$('#endgps').val(sessionStorage["eg"]);
			
			$("input[type='text']").focus(function() {
				$(".nav").hide();
			});
			
			$("input[type='text']").blur(function() {
				$(".nav").show();
			});
			
			$('.btn-info').click(function() {
				$('.popup-box:eq(0)').dialog("open");
				
				$('.popup-sl').click(function() {
					if(navigator.geolocation) {
						//브라우저에서 웹 지오로케이션 지원 여부 판단
						e_focus = 0;
						navigator.geolocation.getCurrentPosition(MyPosition,errorCallback);
					}
					$(this).parents('.popup-box').dialog("close");
					return false;
				});
				
				$('.popup-el').click(function() {
					if(navigator.geolocation) {
						//브라우저에서 웹 지오로케이션 지원 여부 판단
						e_focus = 1;
						navigator.geolocation.getCurrentPosition(MyPosition,errorCallback);
					}
					$(this).parents('.popup-box').dialog("close");
					return false;
				});
				
				$('.popup-close').click(function() {
					$(this).parents('.popup-box').dialog("close");
					return false;
				});
			});
			
			$('.input-btn-bottom').click(function() {
				var time = new Date();
				var refresh = '';
				
				if (time.getHours() < 10) {
					refresh += '0';
				}
				
				refresh += time.getHours();
				refresh += ':';
				
				if (time.getMinutes() < 10) {
					refresh += '0';
				}
				
				refresh += time.getMinutes();
				
				$('.time').val(refresh);
			});
		});
		
		function setime() {
			var time = new Date();
			var settime = '';
			
			settime += '<input type="time" name="time" class="form-control time" value="';
			if (time.getHours() < 10) {
				settime += '0';
			}
			settime += time.getHours();
			settime += ':';
			if (time.getMinutes() < 10) {
				settime += '0';
			}
			settime += time.getMinutes();
			settime += '">';
			settime += '<span class="input-group-btn">';
			settime += '<button class="btn btn-default input-btn input-btn-bottom" type="button">';
			settime += '<i class="fa fa-refresh"></i>';
			settime += '</button>';
			settime += '</span>';
			$('.set-time').html(settime);
		}
		
		function MyPosition(position){
			var lat= position.coords.latitude;
			var lng = position.coords.longitude;
			var fullname = '';
			
			$.ajax({
				url : "http://apis.daum.net/local/geo/coord2addr",
				data : {
					"apikey" : "0742d1ea1eab6220018c3f9716569897d5ec4ff5",
					"longitude" : lng,
					"latitude" : lat,
					"output" : "json",
					"inputCoordSystem" : "WGS84"
				},
				dataType : "jsonp",
				timeout : 30000,
				cache : false,
				success : function(req) {
					// --> var seq = { "message" : "Hello Json" }
					fullname = req.fullName;
					if (e_focus == 1) {
						$('#el').val(fullname);
						$('#endgps').val(lat + "," + lng);
					} else {
						$('#sl').val(fullname);
						$('#startgps').val(lat + "," + lng);
					}
					
				},
				error : function(xhr, status, error) {
					alert("status: " + status + " / error-code: " + xhr.status + " " + error);
				}
			});
		}
		
		function errorCallback(error) {
			alert(error.message);
		}
	</script>
	
</body>
</html>

